<template>
	<view class="withdrawal_wrapper">
		<Tabs style="background-color: #fff;" :sendData="tabConfig" @changeTabs="changeTabs" />
		<view class="wxChat_wrap" v-if="tabConfig.index == 0">
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>微信号</label>
				<input type="text" v-model="formParams.wx.wxAccount" placeholder="请输入微信号" />
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>微信收款码</label>
				<img class="code" v-if="formParams.wx.codeURL" :src="formParams.wx.codeURL" alt="user code" />
				<u-upload
					:fileList="codeList"					
					:maxCount="1"
					@afterRead="afterRead"
					@delete="deletePicture"
					accept="image"
				></u-upload>
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>姓名</label>
				<input type="text" v-model="formParams.wx.name" placeholder="请输入姓名" />
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>提现密码</label>
				<input type="password" v-model="formParams.wx.password" placeholder="请输入提现密码" />
			</view>
		</view>
		<view class="aliPay_wrap" v-if="tabConfig.index == 1">
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>支付宝</label>
				<input type="text" v-model="formParams.aliPay.aliPayAccount" placeholder="支付宝账号" />
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>姓名</label>
				<input type="text" v-model="formParams.aliPay.name" placeholder="请输入姓名" />
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>提现密码</label>
				<input type="password" v-model="formParams.aliPay.password" placeholder="请输入提现密码" />
			</view>
		</view>
		<view class="card_wrap" v-if="tabConfig.index == 2">
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>银行卡号</label>
				<input type="text" v-model="formParams.card.cardAccount" placeholder="银行卡号" />
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>姓名</label>
				<input type="text" v-model="formParams.card.name" placeholder="请输入姓名" />
			</view>
			<view class="wxchat_item">
				<label class="word"><text class="required">*</text>提现密码</label>
				<input type="password" v-model="formParams.card.password" placeholder="请输入提现密码" />
			</view>
		</view>
		<button class="btn" @click="submit">提交</button>
		<view class="rules" @click="viewRules">查看提现规则</view>
	</view>
</template>

<script>
	import * as type from '../../utils/device'
	import Tabs from '@/components/custom_tabs/index.vue'
	export default {
		components: { Tabs },
		data() {
			return {
				tabConfig: {
					index: 0,
					activeColor: '#333',
					activeBorderColor: '#f00',
					list: ['微信','支付宝','银行卡'],
				},
				codeList: [],
				formParams: {
					'wx': {
						wxAccount: '',
						codeURL: '',
						name: '',
						password: '',
					},
					'aliPay': {
						aliPayAccount: '',
						name: '',
						password: ''
					},
					'card': {
						cardAccount: '',
						name: '',
						password: ''
					},					
				},
				rules: {
					wxAccount: '微信号为空',
					codeURL: '微信二维码为空',
					name: '姓名为空',
					password: '提现密码为空',
					aliPayAccount: '支付宝账号为空',
					cardAccount: '银行卡号为空'
				} 
			}
		},
		computed: {
			device(){
				return type.default;
			}
		},
		onLoad(options) {
			this.init(options);
		},
		created(){
			
		},
		methods: {
			init(opt){	// 初始化
				this.tabConfig.index = opt.subIndex;
			},
			changeTabs(i){	// 面包屑导航接收值
				const pages = getCurrentPages()
				const currentRoute = this.device == 'MP-WEIXIN' ? '/'+pages[pages.length - 1].route : pages[pages.length - 1].$route.path;
				uni.redirectTo({ url: `${currentRoute}?subIndex=${i}` });		
			},
			submit(){	// 提交
				let arr = ['wx','aliPay','card' ];
				let i = arr[this.tabConfig.index];
				let obj = this.formParams[i];
				let bool = this.validField(obj,this.rules);
				if (bool) {
					console.log(obj);
				}
			},
			validField(obj,reg){	// 校验表单字段值
				let keys = Object.keys(obj);
				let initNum = 0;
				function recur(arr, i) {	
					let n = arr[i];
					if (obj[n].length > 0) {
						i++;
						if (i < arr.length) {
						    return recur(arr, i);
						} else {
						    return true;
						}
					} else {
						uni.showToast({ title: `${reg[n]}`,icon: 'error' });
						return false;
					}
				}
				return recur(keys,initNum);
			},
			viewRules(){	// 提现规则
				console.log('rules');
				uni.navigateTo({ url: `/pages/rules/index` });
			},
			afterRead(data){ // 上传微信收款码之后的处理
				let ofile = data.file;
				let { name,size, } = data.file;
				let names = ofile.name.split('.');
				let suffix = names[names.length - 1];
				if (['jpg','png'].includes(suffix)) {
					console.log('file',ofile);
					this.codeList = [ofile.url];
					this.formParams.wx.codeURL = ofile.url;
				} else {
					uni.showToast({ title: '请上传jpg或png格式图片',icon: 'error' });
				}
			},
			deletePicture(){	// 删除微信二维码
				console.log('del')
				this.codeList = [];
				this.formParams.wx.codeURL = '';
			},
			uploadSuccess(){	// 上传微信收款码成功
				console.log('ok');
			},
			uploadFail(){	// 上传微信收款码失败
				console.log('error');
			},
			selectFile(e){	// 选择上传微信收款码图片
				console.log('choose image',e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.withdrawal_wrapper{
	.wxChat_wrap{
		background-color: #fff;
		padding: 10px 20px;
		.wxchat_item{
			display: flex;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #ebedf0;
			.word{
				width: 80px;
				font-size: 12px;
				.required{
					margin: 0 3px 0 0;
					font-size: 12px;
					color: #ee0a24;
				}
			}
			.code{
				display: block;
				width: 50px;
				height: 50px;
				margin: 0;
			}
			input{
				font-size: 12px;
			}
		}
	}
	.aliPay_wrap{
		background-color: #fff;
		padding: 10px 20px;
		.wxchat_item{
			display: flex;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #ebedf0;
			.word{
				width: 80px;
				font-size: 12px;
				.required{
					margin: 0 3px 0 0;
					font-size: 12px;
					color: #ee0a24;
				}
			}
			input{
				font-size: 12px;
			}
		}
	}
	.card_wrap{
		background-color: #fff;
		padding: 10px 20px;
		.wxchat_item{
			display: flex;
			align-items: center;
			padding: 15px 0;
			border-bottom: 1px solid #ebedf0;
			.word{
				width: 80px;
				font-size: 12px;
				.required{
					margin: 0 3px 0 0;
					font-size: 12px;
					color: #ee0a24;
				}
			}
			input{
				font-size: 12px;
			}
		}
	}
	.btn{
		margin: 30px 20px 20px;
		border-radius: 30px;
		background-color: #07c160;
		border: 1px solid #07c160;
		font-size: 14px;
		color: #fff;
	}
	.rules{
		font-size: 14px;
		text-align: center;
		color: #5496d3;
	}
}
</style>
